import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';


class StepsWidget extends StatefulWidget {
  const StepsWidget({Key? key, required this.currentIndex}) : super(key: key);
  final int currentIndex;

  @override
  _StepsWidgetState createState() => _StepsWidgetState();
}

class _StepsWidgetState extends State<StepsWidget> {
  final _items = ["已下单", "卖家已寄存", "买家已取货"];

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      height: 80.h,
      alignment: Alignment.center,
      width: double.infinity,
      child: ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: _items.length,
          itemBuilder: (context, index) {
            //如果显示到最后一个并且Icon总数小于200时继续获取数据
            return _buildItem(index);
          }),
    );
  }

  Widget _buildItem(int index) {
    return Container(
      padding: EdgeInsets.only(top: 8.h),
      child: Column(
        children: [
          Row(
            children: [
              Opacity(
                opacity: index == 0 ? 0 : 1,
                child: Container(
                  width: 40.w,
                  height: 1,
                  decoration: BoxDecoration(
                      color: index <= widget.currentIndex
                          ? const Color(0xFFEA4B9B)
                          : const Color(0xFFfff0f5)),
                ),
              ),
                index <= widget.currentIndex
                    ? const Icon(Icons.circle, color: Color(0xFFEA4B9B), size: 10,)
                    : const Icon(Icons.circle, color: Color(0xFFfff0f5), size: 10),
              Opacity(
                opacity: _items.length - 1 == index ? 0 : 1,
                child: Container(
                  width: 40.w,
                  height: 1,
                  decoration: BoxDecoration(
                      color: index < widget.currentIndex
                          ? const Color(0xFFEA4B9B)
                          : const Color(0xFFfff0f5)),
                ),
              )
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: 5.h),
            child: Text(
              _items[index],
              style: TextStyle(fontFamily: "PingFang SC",
                  fontWeight: FontWeight.w600,
                  fontSize: 14.sp,
                  color: const Color(0xFF262626)),
            ),
          )
        ],
      ),
    );
  }
}